<template>
  <div>
    <div class="text-[12px] text-[#E50113] leading-[17px]">
      平台运输方式配置指，订单使用了此渠道，平台标发，用此配置物流商名称和承运商名称上传到对应平台进行标记发货。
    </div>
    <div v-for="(item, index) in platform" :key="item">
      <div class="text-[14px] text-[#333] leading-[20px] mb-[4px] mt-[16px]">
        {{ item.platform_name }}
      </div>
      <div class="flex items-center">
        <template v-if="item.country_codes?.length">
          <el-select
            v-model="item.country_code"
            filterable
            clearable
            @change="handleChangeCountry(item)"
            placeholder="请选择国家"
            class="w-[220px] mr-[16px]"
          >
            <el-option
              v-for="item in item.country_codes"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            >
            </el-option>
          </el-select>
          <el-select
            v-model="item.carrier"
            clearable
            filterable
            placeholder="请选择承运人"
            class="w-[220px] mr-[16px]"
          >
            <el-option
              v-for="item in item.carrier_codes[item.country_code]"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            >
            </el-option>
          </el-select>
        </template>
        <template v-else>
          <el-select
            v-if="getPlatformVal(item.platform_code, 'type1')"
            v-model="item.carrier"
            filterable
            clearable
            @change="handleChange(item)"
            :placeholder="getPlatformVal(item.platform_code, 'type1')"
            class="w-[220px] mr-[16px]"
          >
            <el-option
              v-for="item in item.carrier_code"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            >
            </el-option>
          </el-select>
          <el-select
            v-if="
              getPlatformVal(item.platform_code, 'type2') &&
              getPlatformVal(item.platform_code, 'type2') != 'tracking Url'
            "
            v-model="item.delivery_service"
            clearable
            filterable
            :placeholder="getPlatformVal(item.platform_code, 'type2')"
            class="w-[220px] mr-[16px]"
          >
            <el-option
              v-for="item in item.delivery_service_code"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            >
            </el-option>
          </el-select>
          <el-input
            v-if="getPlatformVal(item.platform_code, 'type2') == 'tracking Url'"
            v-model="item.tracking_url"
            :placeholder="getPlatformVal(item.platform_code, 'type2')"
            class="mr-[16px]"
            style="width: 220px"
          />
        </template>
        <VGroup v-if="item.is_issue" class="mr-[16px]">
          <el-select
          v-model="item.todo"
          class="w-[100px]"
          filterable
          placeholder="标发条件"
        >
          <el-option
            v-for="item in [{label:'前缀',value:1},{label:'后缀',value:2}]"
            :key="item.value"
            :value="item.value"
            :label="item.label"
          >
          </el-option>
        </el-select>
        <el-input v-model="item.todo" style="width:200px"/>
        </VGroup>
        <el-select
          v-model="item.shipment_type"
          class="w-[256px]"
          filterable
          placeholder="请选择发货追踪号"
        >
          <el-option
            v-for="item in options['shipment_type']"
            :key="item.value"
            :value="item.value"
            :label="item.label"
          >
          </el-option>
        </el-select>

        <el-checkbox
          v-model="item.is_apply"
          class="ml-[8px]"
          :true-label="1"
          :false-label="0"
        >
          是否适用此平台
        </el-checkbox>
        <el-checkbox
          v-model="item.is_issue"
          class="ml-[8px]"
          :true-label="1"
          :false-label="0"
        >
          根据前后缀判断标发
        </el-checkbox>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { platformList, transformData } from "./data.js";
import { getPlatformOptions, carrier, deliveryService } from "@/api/public";
import { getLogisticsChannel, transportType } from "../../api";
const props = defineProps({
  data: { type: Object, default: () => ({}) },
  options: { type: Object, default: () => ({}) },
});

const platform = ref([]);
const flage = ref(false);
const getPlatform = async () => {
  try {
    const { data } = await getPlatformOptions();
    let mergeResult = transformData(transportTypeList.value);
    for (let i = 0; i < data.length; i++) {
      let list =
        mergeResult.find(
          (item) => item.platform_code == data[i].platform_code
        ) || {};
      data[i].carrier_code = list?.carrier_code || [];
      data[i].delivery_service_code = list?.delivery_service || [];
      if (list?.country_code) {
        data[i].country_codes = list?.country_codes || [];
        data[i].carrier_codes = list?.carrier_codes || [];
      }
    }
    const codes = platformList.map((item) => item.code);
    platform.value = data?.filter((obj) => codes?.includes(obj.platform_code));
    flage.value = true;
  } catch (e) {
    console.error(e);
  }
};
const transportTypeList = ref([]);
const getTransportType = async () => {
  try {
    const { data } = await transportType();
    transportTypeList.value = data || [];
    getPlatform();
  } catch (e) {
    console.error(e);
  }
};
getTransportType();
const getPlatformVal = (val, code) => {
  let data = platformList.find((i) => i.code == val);
  return data[code] ? data[code] : false;
};
const handleChange = (item) => {
  if (!item.shipment_type) {
    item.shipment_type = 2;
  }
};
const handleChangeCountry = (item) => {
  if (!item.shipment_type) {
    item.shipment_type = 2;
  }
  item.carrier = null;
};
watch(
  () => [props.data, flage.value],
  (val) => {
    if (!flage.value || !props?.data || !Array.isArray(props?.data)) return;
    const newPlatform = JSON.parse(JSON.stringify(platform.value));
    const _new = newPlatform?.map((n) => {
      const _item = props.data?.find((v) => v.platform_id === n.platform_id);
      return {
        ...n,
        ..._item,
      };
    });
    platform.value = _new;
  }
);
const submit = () => {
  return new Promise((resolve, reject) => {
    try {
      let _result = JSON.parse(JSON.stringify(platform.value));
      _result = _result.filter(
        (n) => !!n.logistics_id || !!n.carrier || !!n.shipment_type
      );
      _result = _result.map((n) => {
        return {
          id: n?.id || undefined,
          platform_id: n.platform_id,
          channel_id: n.channel_id,
          tracking_url: n.tracking_url,
          carrier: n.carrier,
          delivery_service: n.delivery_service,
          shipment_type: n.shipment_type,
          is_apply: n.is_apply,
          country_code: n.country_code,
          ext_json: null,
        };
      });
      // if (!_result.length) {
      //   ElMessage.warning("请至少填写一条运输方式");
      //   reject();
      //   return;
      // }
      resolve(_result);
    } catch (e) {
      ElMessage.warning(e || "请检查平台运输方式填写");
      reject("transportType");
    }
  });
};

defineExpose({ submit });
</script>
